<template>
  <leftbar title="CBNDSK/Aasah ashdjk jdkd" left="true">
    <template #right>
      <van-icon name="plus" />
    </template>
  </leftbar>
  <!-- <div class="page">
    <div class="list-box" v-for="item in 7" :key="item">
      <span class="tit">ABBBBB</span>
      <span class="tit1">9/000</span>
      <span class="tit1">8.000</span>
    </div>
  </div> -->
  <van-dropdown-menu>
    <van-dropdown-item v-model="value1" :options="option1" />
  </van-dropdown-menu>
  <!--  -->
  <div class="number-row">
    <span class="operation"><b>-0.1</b><b>-0.01</b></span
    ><span class="number">0.9</span><span class="operation"><b>+0.1</b><b>+0.01</b></span>
  </div>
  <!-- 数字操作 -->
  <div class="number-row number-row1">
    <span class="operation"><b>-</b><span>SL</span><b>+</b></span
    ><span class="operation"><b>-</b><span>TP</span><b>+</b></span>
  </div>
  <van-dropdown-menu>
    <van-dropdown-item v-model="value1" :options="option1" />
  </van-dropdown-menu>
  <!-- 线条 -->

  <!-- 底部 -->
  <div class="footer">
    <div class="tips">注意：市价交易模式下的实际成交价格，可能会和请求价格有一定差异！</div>
    <div class="btns">
      <div class="btn"><span>SELL</span><br /><span>通过市场</span></div>
      <div class="btn"><span>BUY</span><br /><span>通过市场</span></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { showDialog } from 'vant'
import leftbar from '@/components/leftbar.vue'

// defineProps<{ msg: string }>()

const active = ref(0)
// const username = ref('')
// const password = ref('')
// ruoter
const router = useRouter()

// 菜单
const value1 = ref(0)
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 }
]

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>
<style scoped lang="scss">
.page {
  padding: 10px;
}
.number-row1 {
  border-bottom: none !important;
  margin: 20px 10px;
}
.number-row1 .operation:last-child {
  border-bottom: 1px solid green;
}
.number-row1 .operation:first-child {
  border-bottom: 1px solid red;
}
.number-row {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  line-height: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  .operation {
    width: 40%;
    display: inline-flex;
    justify-content: space-between;
  }
  .number {
    flex-shrink: 0;
  }
  b {
    color: #1c84fa;
    cursor: pointer;
  }
}

.footer {
  background: #f5f5f5;
  position: relative;
  z-index: 11;
  .tips {
    border-bottom: 1px solid rgb(219, 216, 216);
    color: #999;
    padding: 10px;
  }
  .btns {
    display: flex;
    justify-content: space-between;
    text-align: center;
    // height: 40px;
    align-items: center;
    padding-top: 10px;
    color: #1c84fa;
  }
  .btns .btn:first-child {
    border-right: 1px solid #888;
    color: red;
  }
  .btn {
    width: 50%;
    font-size: 16px;
  }
}
</style>
